<template>
  <el-container>
    <el-header>
      <p>{{ headName }}</p>
    </el-header>
    <el-main>
      <el-card class="card">
        <el-row>
          <el-col :span="8" v-for="item in memberInfo" :key="item">
            <div class="container">
              <el-card
                @click="handleFlip"
                id="container"
                :body-style="{ padding: '0px' }"
                style="border-radius:10px;margin-right:8%;margin-left:8%;margin-top:8%;"
              >
                <img :src="item.img" class="image" />
                <div style="padding: 14px;">
                  <span @click="showInfo(item.name)" style="cursor:pointer">{{
                    item.name
                  }}</span>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-dialog :visible.sync="memberInfoDialog">
        <el-table :data="detailInfo" style="width: 100%">
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="remark" label="备注"> </el-table-column>
        </el-table>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      headName: "",
      detailInfo: [
        {
          img: require("@/assets/css/images/welimg.png"),
          name: "垃圾佬1号",
          remark: "小组组长，住在南十二宿舍楼",
        },
      ],
      memberInfo: [
        {
          img: require("@/assets/css/images/welimg.png"),
          name: "垃圾佬1号",
          position: "组长",
          address: "南十二宿舍楼",
        },
        {
          img: require("@/assets/css/images/wallpaper1.png"),
          name: "垃圾佬2号",
        },
        {
          img: require("@/assets/css/images/wel.png"),
          name: "垃圾佬3号",
        },
        {
          img: require("@/assets/css/images/welcome.gif"),
          name: "垃圾佬4号",
        },
        {
          img: require("@/assets/css/images/home.png"),
          name: "垃圾佬5号",
        },
        {
          img: require("@/assets/css/images/403.gif"),
          name: "垃圾佬6号",
        },
      ],

      total: 6,
      flag: true,
      memberInfoDialog: false,
    };
  },
  created() {
    if (localStorage.getItem("teamName")) {
      this.headName = localStorage.getItem("teamName");
      // localStorage.clear();
    }
  },
  methods: {
    //获取当前成员信息
    async showInfo(name) {
      // console.log(name);
      // this.showName = name;
      const { data: res } = await this.$http.get("teamDetail/" + name);
      this.queryInfo = res.data;
      this.memberInfoDialog = true;
    },
    handleFlip() {
      let container = document.getElementById("container");
      container.style.transform = this.flag ? "rotateY(180deg)" : "";
      this.flag = !this.flag;
    },
  },
};
</script>

<style lang="less" scoped>
.el-header {
  background-color: #3a3d41;
  text-align: center;
  color: aliceblue;
}
.el-main {
  height: 100vh;
  background-color: rgb(243, 243, 243);
}
.card {
  border-radius: 10px;
  height: 80vh;
  margin-top: 20px;
  width: 80%;
  margin-left: 10%;
}
.el-row-inline {
  display: flex;
  flex-wrap: wrap;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.image {
  width: 100%;
  display: block;
}
.container {
  transition: all 0.5s;
  transform-style: preserve-3d;
}
.face,
.back {
  // position: absolute;
  backface-visibility: hidden;
}
.face {
  z-index: 1;
  background-color: antiquewhite;
}
.back {
  transform: rotateY(180deg);
  background-color: aqua;
}
</style>
